<template>
  <div>
    <cusDialog ref="dialog" width="25%" :title="title" headCss="float:left;" @hideHandler="hideHandler"
      @confrim="confrimHandler">
      <el-form ref="personFormRef" :rules="rules" :model="personForm" label-width="80px">
        <el-form-item>
          <SingleUpload></SingleUpload>
          <span class="lableBox cpr-16">点击上传图片</span>
        </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input v-model.trim="personForm.username" maxlength="30" clearable placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model.trim="personForm.account" maxlength="30" clearable placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="所属组织" prop="tissuesname">
          <el-input v-model.trim="personForm.tissuesname" maxlength="30" clearable placeholder="请输入所属组织">
          </el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model.trim="personForm.position" maxlength="30" clearable placeholder="请输入职位"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model.trim="personForm.linkPhone" onkeyup="value=value.replace(/[^\d]/g,'')" clearable
            placeholder="请输入电话号码"></el-input>
        </el-form-item>
      </el-form>
    </cusDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import SingleUpload from "@/components/Upload/SingleUpload.vue";
import type { FormInstance, FormRules } from "element-plus";
const router = useRouter();

// 人员初始化数据
const formOrigin = () => ({
  username: "", //人员姓名
  account: "", // 账号
  tissuesname: "", //所属组织
  position: "", //职位
  linkman: "", //联系方式
});

const personForm = ref(formOrigin());
const personFormRef = ref(null);
const title = ref("人员添加");
const rules = reactive<FormRules>({
  username: { required: true, message: "此项必填", trigger: "blur" },
  account: { required: true, message: "此项必填", trigger: "blur" },
  tissuesname: { required: true, message: "此项必填", trigger: "blur" },
});

const dialog = ref(null);
// 展示对话框
const showHandler = (tit: string) => {
  title.value = tit;
  dialog.value.show = true;
};
// 对话框关闭重置初始数据
const hideHandler = () => {
  personForm.value = formOrigin();
  personFormRef.value.resetFields();
};
const confrimHandler = () => {
  personFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
defineExpose({ showHandler, personForm });
</script>

<style lang="scss" scoped>
.lableBox {
  //styleName: 中文简体R/H8;
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
</style>